<template>
  <div class="approval-page">
    <!-- 待办任务表格 -->
    <el-table :data="taskData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="任务ID" width="180"></el-table-column>
      <el-table-column prop="name" label="任务名称" width="150"></el-table-column>
      <el-table-column prop="details.compensation.driverId" label="司机ID" width="180"></el-table-column>
      <el-table-column prop="details.compensation.orderId" label="订单ID" width="200"></el-table-column>
      <el-table-column prop="details.compensation.reason" label="赔偿原因" width="300"></el-table-column>
      <el-table-column prop="details.compensation.money" label="金额" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button
              link
              type="success"
              size="small"
              @click="approveTask(scope.row.id, true)">审批通过
          </el-button>
          <el-button
              link
              type="danger"
              size="small"
              @click="approveTask(scope.row.id, false)">驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'CompensationApproval',
  data() {
    return {
      taskData: [],
    };
  },
  mounted() {
    this.fetchTasks();
  },
  methods: {
    fetchTasks() {
      axios.get('/compensation/findTaskByEmpId').then(res => {
        if (res.data.code === 200) {
          this.taskData = res.data.data.map(task => ({
            ...task,
            details: {
              ...task.details,
              compensation: {
                ...task.details.compensation,
              },
            },
          }));
        } else {
          ElMessage({
            message: '获取任务失败，请重试',
            type: 'error',
            duration: 3000,
          });
        }
      });
    },
    approveTask(taskId, agree) {
      const url = `/compensation/completeTask/${taskId}/${agree}`;
      axios.get(url).then(res => {
        if (res.data.code === 200 && res.data.data) {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 3000,
          });
          this.fetchTasks(); // 更新任务列表
        } else {
          ElMessage({
            message: '操作失败，请重试',
            type: 'error',
            duration: 3000,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.approval-page {
  padding: 20px;
}
</style>
